<template>
  <div class="liquid-chart">
    <VueEchart :option="options" style="width: 100%;height: 100%;" />
    <div class="liquid-chart-num">
      <slot></slot>
    </div>
  </div>
</template>
<script>
import "echarts-liquidfill";
import VueEchart from "./VueEchart";
export default {
  name: "LiquidChart",
  components: {
    VueEchart
  },
  props: {
    value: {
      type: [Number, String],
      default: 18
    },
    isShowNum: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {};
  },
  computed: {
    options() {
      const value = 0.25;
      return {
        // title: {
        //   text: value,
        //   top: 22,
        //   x: 'center',
        //   textStyle: {
        //     color: '#02EFFF',
        //     textShadowColor: '#0CA97F',
        //     // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        //     //   { offset: 0, color: '#FFFFFF' },
        //     //   { offset: 1, color: '#02EFFF' }
        //     // ]),
        //     margin: 22,
        //     fontSize: 20
        //   }
        // },
        grid: {
          top: 20,
          bottom: 20,
          right: 12,
          left: 12,
          containLabel: true
        },
        angleAxis: {
          polarIndex: 0,
          min: 0,
          max: 100,
          show: false,
          // startAngle:90,
          clockwise: false
        },
        radiusAxis: {
          type: "category",
          min: 10,
          max: 10,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        polar: {
          center: ["50%", "50%"], //中心点位置
          radius: "100%" //图形大小
        },
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: "#60FFC2" //下
              },
              {
                offset: 0,
                color: "rgba(11, 201, 199, 0.3)"
              }
            ],
            globalCoord: false
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: "#05DCF8" //下
              },
              {
                offset: 0,
                color: "rgba(11, 201, 199, 1)"
              }
            ],
            globalCoord: false
          }
        ],
        series: [
          {
            type: "liquidFill",
            radius: "100%",
            center: ["50%", "50%"],
            color: ["#60FFC2", "#05DCF8"],
            data: [value, value / 1.1, value / 1.2], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1,
              color: {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 1,
                    color: "#DEFEFF"
                  },
                  {
                    offset: 0.39,
                    // color: '#1560C3'
                    color: "rgba(0,236,255,0.07)"
                  },
                  {
                    offset: 0.07,
                    color: "rgba(9,231,255,0.39)"
                  }
                ],
                globalCoord: false
              }
            },
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 0,
                borderColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0.04,
                      color: "#60FFC2"
                    },
                    {
                      offset: 0.78,
                      color: "rgba(5,220,248,0.78)"
                    },
                    {
                      offset: 1,
                      color: "rgba(6,158,255,0.35)"
                    }
                  ],
                  globalCoord: false
                },
                shadowBlur: 10
                // shadowColor: '#000'
              }
            },
            label: {
              show: false
              // rich: {
              //   a: {
              //     fontSize: 34,
              //     fontFamily: 'DS',
              //     color: '#03F0FF'
              //   },
              //   b: {
              //     fontSize: 14,
              //     color: '#1279A9'
              //   },
              //   c: {
              //     fontSize: 11,
              //     color: '#B7C9E3',
              //     height: 30
              //   }
              // }
            }
          }
        ]
      };
    }
  },
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {}
};
</script>
<style lang="scss" scoped></style>
